<template>
    <div class="hngkContent">
        <div class="hngkLeft">
            <div>
                <HngkLeftOne/>
                <HngkLeftTwo/>
            </div>
        </div>
        <div class="hngkRight">
            <div>
                <HngkRightOne :val='val'/>
                <HngkRightTwo/>
                <HngkRightThree/>
                <HngkRightFour/>
            </div>
        </div>
    </div>
</template>

<script>
import HngkLeftOne from "./hngkLeft/HngkLeftOne"
import HngkLeftTwo from "./hngkLeft/HngkLeftTwo"
import HngkRightOne from "./hngkRight/HngkRightOne"
import HngkRightTwo from "./hngkRight/HngkRightTwo"
import HngkRightThree from "./hngkRight/HngkRightThree"
import HngkRightFour from "./hngkRight/HngkRightFour"
import { defineComponent, getCurrentInstance, onMounted, ref, provide ,reactive,toRefs} from 'vue'
import { useRouter } from 'vue-router'
import { get } from '../../util/request'

const departmentEffect = () => {
    let val = reactive({list:[]});
    const getDepartment = async () => {
        const result = await get('/countByCity')
        console.log(result)
        val.list = result
    }
    //const { val } = toRefs(msg)
    return { val, getDepartment}
}

export default defineComponent({
    components:{ HngkLeftOne, HngkLeftTwo, HngkRightOne, HngkRightTwo, HngkRightThree, HngkRightFour},
    setup(props,context){
        const { val, getDepartment } = departmentEffect();
        getDepartment();
        return {
           val
        }
    }
})
</script>

<style lang="stylus" scoped>
    @import '../../assets/varibles.styl'
    .hngkLeft
        position: absolute
        top: vh(85)
        padding-top:vh(32)
        left: vw(0)
        padding-left:vw(24)
        width: vw(389)
        height: vh(995)
        box-sizing: border-box
        //background: linear-gradient(to right, rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
        background: #00
    .hngkRight
        position: absolute
        top: vh(85)
        right: vw(0)
        padding-right:vw(24)
        width: vw(389)
        height: vh(995)
        box-sizing: border-box 
        //background: linear-gradient(to left, rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
        background: #000
</style>